/*
 * @Author: liu.lin liu.lin@hzleaper.com
 * @Date: 2024-01-29 13:52:12
 * @LastEditors: liu.lin liu.lin@hzleaper.com
 * @LastEditTime: 2024-01-29 13:59:49
 * @FilePath: \react_ts\src\pages\Else\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { FC, useState } from "react"
import "./index.less"

// 这个页面根据业务来自行设计吧
const Else: FC = () => {
  const [isShow, setIsShow] = useState(false)
  const handleClick = () => {
    setIsShow(true)
  }

  // const arrowMove = (e: any) => {
  //   // 元素大小
  //   let elW = e.currentTarget.offsetWidth
  //   let elH = e.currentTarget.offsetHeight
  //   // 元素位置
  //   let elL = e.currentTarget.offsetLeft
  //   let elT = e.currentTarget.offsetTop
  //   // 鼠标位置
  //   let x = e.clientX
  //   let y = e.clientY
  //   // 窗口大小
  //   let w = window.innerWidth
  //   let h = window.innerHeight
  //   // 鼠标到元素左边距离
  //   let moveX = x - elL
  //   let moveY = y - elT
  //   let el = e.currentTarget
  //   document.onmousemove = function (e) {
  //     el.style.right = w - (e.clientX - moveX) - elW + "px"
  //     el.style.bottom = h - (e.clientY - moveY) - elH + "px"
  //   }
  //   document.onmouseup = function () {
  //     document.onmousemove = null
  //     document.onmouseup = null
  //   }
  // }

  const arrowMove = (e: any) => {
    let elW = e.currentTarget.offsetWidth
    let elH = e.currentTarget.offsetHeight
    let elL = e.currentTarget.offsetLeft
    let elT = e.currentTarget.offsetTop
    let x = e.clientX
    let y = e.clientY
    let w = window.innerWidth
    let h = window.innerHeight
    let moveX = x - elL
    let moveY = y - elT
    let el = e.currentTarget

    document.onmousemove = function (e) {
      let left = e.clientX - moveX
      let top = e.clientY - moveY
      let right = w - (left + elW)
      let bottom = h - (top + elH)

      if (left < 0) {
        left = 0
      }

      if (top < 0) {
        top = 0
      }

      if (right < 0) {
        left += right
      }

      if (bottom < 0) {
        top += bottom
      }

      el.style.left = left + "px"
      el.style.top = top + "px"
    }

    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
  }

  const handleClick1 = () => {
    console.log(111111111)
  }

  return (
    <div>
      <button onClick={handleClick}>点击出现pop111</button>
      <button onClick={handleClick1}>ahahah</button>
      {isShow === true ? (
        <div onMouseDown={arrowMove} className="pop">
          111113
        </div>
      ) : null}
    </div>
  )
}
export default Else
